<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<title>节点-树-虚拟DOM</title>
</head>
<body>
<div id="app">
	<demo-render blog-title="测试标题1">
	</demo-render>
	<demo-render-a blog-title="测试标题A">
	</demo-render-a>
	<demo-render-b></demo-render-b>

	<demo-render-c>测试标题C</demo-render-c>
</div>
</body>
</html>
<script type="text/javascript">
	// 直接使用模板
	Vue.component('demo-render', {
		props: {
            blogTitle: String,
		},
		template:'<h1>{{ blogTitle }}</h1>'
		
	});
	// Render 函数A
	Vue.component('demo-render-a',{
		props: {
            blogTitle: String,
		},
		render: function (createElement) {
		  return createElement('h1', this.blogTitle)
		},
	});

	
	// Render函数 B
	Vue.component('demo-render-b',{
		data: function () {
		    return {
		      blogTitle: "测试标题B"
		    }
	  	},
		render: function (createElement) {
		  return createElement('h1', this.blogTitle)
		},
	});
	
	// Render 函数C
	Vue.component('demo-render-c',{
		
		render: function (createElement) {
			//  this.$slots.default
			 // https://cn.vuejs.org/v2/api/#vm-slots  
			return createElement('h1', this.$slots.default)
		},
	});

	new Vue({
		el:'#app',
	})
</script>